<template>
  <div class="chart-config">
    <el-form :model="localConfig" label-width="100px">
      <el-form-item label="图表标题">
        <el-input v-model="localConfig.title" placeholder="请输入图表标题" />
      </el-form-item>
      
      <el-form-item label="图表类型">
        <el-select v-model="localConfig.chartType" placeholder="选择图表类型">
          <el-option label="折线图" value="line" />
          <el-option label="柱状图" value="bar" />
          <el-option label="饼图" value="pie" />
          <el-option label="面积图" value="area" />
        </el-select>
      </el-form-item>
      
      <el-form-item v-if="localConfig.chartType !== 'pie'" label="系列名称">
        <el-input v-model="localConfig.seriesName" placeholder="请输入系列名称" />
      </el-form-item>
      
      <el-form-item v-if="localConfig.chartType !== 'pie'" label="X轴数据">
        <el-input
          v-model="xAxisDataStr"
          type="textarea"
          :rows="2"
          placeholder="请输入X轴数据，用逗号分隔，如：1月,2月,3月"
        />
      </el-form-item>
      
      <el-form-item label="数据">
        <el-input
          v-model="dataStr"
          type="textarea"
          :rows="4"
          :placeholder="dataPlaceholder"
        />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="previewChart">预览图表</el-button>
        <el-button @click="resetConfig">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'

interface ChartConfig {
  title: string
  chartType: 'line' | 'bar' | 'pie' | 'area'
  data: any[]
  xAxisData?: string[]
  seriesName?: string
}

const props = defineProps<{
  config: ChartConfig
}>()

const emit = defineEmits<{
  'update:config': [config: ChartConfig]
}>()

const localConfig = ref<ChartConfig>({ ...props.config })
const xAxisDataStr = ref('')
const dataStr = ref('')

const dataPlaceholder = computed(() => {
  if (localConfig.value.chartType === 'pie') {
    return '饼图数据格式：\n[{"name":"搜索引擎","value":1048},{"name":"直接访问","value":735}]'
  }
  return '数值数据，用逗号分隔，如：120,200,150,80,70,110'
})

// 初始化数据字符串
const initDataStrings = () => {
  if (localConfig.value.xAxisData) {
    xAxisDataStr.value = localConfig.value.xAxisData.join(',')
  }
  
  if (localConfig.value.chartType === 'pie') {
    dataStr.value = JSON.stringify(localConfig.value.data, null, 2)
  } else {
    dataStr.value = localConfig.value.data.join(',')
  }
}

// 解析数据字符串
const parseDataStrings = () => {
  try {
    // 解析X轴数据
    if (xAxisDataStr.value.trim()) {
      localConfig.value.xAxisData = xAxisDataStr.value.split(',').map(item => item.trim())
    }
    
    // 解析数据
    if (dataStr.value.trim()) {
      if (localConfig.value.chartType === 'pie') {
        localConfig.value.data = JSON.parse(dataStr.value)
      } else {
        localConfig.value.data = dataStr.value.split(',').map(item => {
          const num = parseFloat(item.trim())
          return isNaN(num) ? 0 : num
        })
      }
    }
  } catch (error) {
    ElMessage.error('数据格式错误，请检查输入')
    return false
  }
  return true
}

const previewChart = () => {
  if (parseDataStrings()) {
    emit('update:config', { ...localConfig.value })
    ElMessage.success('图表配置已更新')
  }
}

const resetConfig = () => {
  localConfig.value = {
    title: '数据图表',
    chartType: 'line',
    data: [120, 200, 150, 80, 70, 110],
    xAxisData: ['1月', '2月', '3月', '4月', '5月', '6月'],
    seriesName: '数据'
  }
  initDataStrings()
}

// 监听配置变化
watch(() => props.config, (newConfig) => {
  localConfig.value = { ...newConfig }
  initDataStrings()
}, { deep: true })

// 监听图表类型变化，重置数据格式
watch(() => localConfig.value.chartType, (newType) => {
  if (newType === 'pie') {
    dataStr.value = JSON.stringify([
      { name: '搜索引擎', value: 1048 },
      { name: '直接访问', value: 735 },
      { name: '邮件营销', value: 580 }
    ], null, 2)
  } else {
    dataStr.value = '120,200,150,80,70,110'
  }
})

// 初始化
initDataStrings()
</script>

<style scoped>
.chart-config {
  padding: 20px;
}
</style>
